<template>
    <app-page>
        <div class="buyip_index">
            <div class="nav">
                <div class="text1 ip" @click="router.replace('ip')">IP</div>
                <div class="text1" style="margin: 0 4px;">/</div>
                <div class="text2">买IP</div>
            </div>
            <div class="content">
                <BuyContent />
            </div>
        </div>
    </app-page>

</template>

<script setup>
import BuyContent from "./BuyContent.vue";

const router = useRouter()
</script>

<style lang="scss" scoped>
.buyip_index {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav {
    width: 100%;
    display: flex;
    align-items: center;

    .text1 {
        font-size: 14px;
        color: #8a8a8a;
    }
    .ip{
        cursor: pointer;
    }

    .text2 {
        font-size: 20px;
        font-weight: 600;
        color: #333;
    }
}

.content{
    width: 440px;
    margin-top: 24px;
    display: flex;
}
</style>